<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2021/7/6
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>播放视频页面</title>

</head>

<style>
    @import "/css/play_video.css";
</style>
<body>
<!--页头-->
<div>
    <!--页头-->
    <header>
        <div class="video_top">
            <div class="h_div1">
                <a href="#">
                <img style="height: 50px;width: 180px" src=""
                                                 alt="">
                </a>
            </div>
            <div class="h_div2">
                <form action="" method="post">
                    <input type="text" class="searchInput"/>
                    <button>搜索</button>
                </form>
            </div>
            <div class="h_div3">
            <span class="uploadSpan"><a href="#">上传</a></span>
            <span class="mySpan"><a href="#">我的</a></span>
            </div>
        </div>
    </header>
    <!--播放器-->
    <div>
        <div class="video2" style=" width: 100%;">
            <video class="video_v" tabindex="2" id="myVideo" controls autoplay="true" src="../../../../../../../../sumbit/douyu/xshi/xshi/src/main/webapp/dfish/static/ctui.mp4">
            </video>
        </div>
        <div class="video_test">
            <div class="video_test01" style="width: 50%;color: aliceblue;float: left">
                播放0次&nbsp;|&nbsp;发布时间:2021年5月21日
            </div>
            <div style="width: 50%;color: aliceblue;float: left">
                <ul style="list-style: none">
                    <li class="li1">
                        <div class="like">
                            <div class="img-box">
                                <img src="#" alt="">
                            </div>
                            点赞
                        </div>
                    </li>
                    <li class="li1">
                        <div class="share">
                            <div class="img-box">
                                <img src="#" alt="">
                            </div>
                            收藏
                        </div>
                    </li>
                    <li class="li1">
                        <div class="share" @click="shareHandler">
                            <div class="img-box">
                                <img src="#" alt="">
                            </div>
                            分享
                        </div>
                    </li>
                </ul>
            </div>

        </div>

    </div>
</div>
<div class="video3" style="width:600px">
    <p class="video_title">视频标题</p>
</div>
<div class="author">
    <div class="author_pic" style="float: left">
        <a href="#"><img src="#"></a>
    </div>
    <div class="author_user" style="float: left">
        <a href="#">用户名</a>
    </div>
</div>
<!--发布评论-->
<div class="comment">
    <h3>评论</h3>
    <div>
        <form action="" method="post">
            <span style="width: 20px;"></span>
            <textarea class="comment_k" placeholder="说说你的看法" maxlength="500" style="width: 100%;height: 100px">

    </textarea>
            <span style="display: block;float: left;margin-left: 550px"><button>回复</button></span>
        </form>
    </div>

</div>
<!--播单-->
<div class="video_r">
    <span><h3>相关视频</h3></span>
    <div class="hot_video_list">
        <ul class="hot_video_ul">
            <li>
                <div class="hot_video_list1">
                    <div class="hot_video1">
                        <a href="#">
                            <div class="hot_pic">
                                <img class="pic" src="../../../../../../../../sumbit/douyu/xshi/xshi/src/main/webapp/dfish/static/1.gif">
                            </div>
                        </a>
                    </div>
                    <div class="hot_video">
                        <div class="hot_video3"><a href="#">
                            <span>我可爱嘛</span>
                        </a>
                        </div>
                        <div class="hot_video4">
                    <span>
                        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.9"
                                  d="M7.663 3.153c.599-.854 1.582-1.305 2.665-1.305 2.06 0 3.775 1.788 3.775 3.914 0 .06 0 .107-.002.14a.316.316 0 00.002.077c-.008.448-.085.817-.222 1.305-.078.088-.15.253-.222.435a1.936 1.936 0 00-.222.435 7.96 7.96 0 01-.136.22c-.564.884-1.346 1.768-2.125 2.547-1.144 1.151-2.304 2.108-2.81 2.526-.142.116-.232.19-.258.216-.185.185-.37.185-.556.185h-.005c-.368-.001-.553-.186-.738-.37a1.68 1.68 0 00-.1-.085 26.877 26.877 0 01-3.068-2.698c-.89-.912-1.743-1.952-2.213-2.97C1.242 7.353 1.01 6.47 1 5.979c.004-.003.003-.027.002-.074L1 5.762c0-2.127 1.713-3.914 3.775-3.914 1.08 0 2.065.451 2.888 1.305z"
                                  fill="#4F5168"></path>
                        </svg>
                        2.3w
                    </span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="hot_video_list1">
                    <div class="hot_video1">
                        <a href="#">
                            <div class="hot_pic">
                                <img class="pic" src="../../../../../../../../sumbit/douyu/xshi/xshi/src/main/webapp/dfish/static/1.gif">
                            </div>
                        </a>
                    </div>
                    <div class="hot_video">
                        <div class="hot_video3"><a href="#">
                            <span>我可爱嘛</span>
                        </a>
                        </div>
                        <div class="hot_video4">
                    <span>
                        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.9"
                                  d="M7.663 3.153c.599-.854 1.582-1.305 2.665-1.305 2.06 0 3.775 1.788 3.775 3.914 0 .06 0 .107-.002.14a.316.316 0 00.002.077c-.008.448-.085.817-.222 1.305-.078.088-.15.253-.222.435a1.936 1.936 0 00-.222.435 7.96 7.96 0 01-.136.22c-.564.884-1.346 1.768-2.125 2.547-1.144 1.151-2.304 2.108-2.81 2.526-.142.116-.232.19-.258.216-.185.185-.37.185-.556.185h-.005c-.368-.001-.553-.186-.738-.37a1.68 1.68 0 00-.1-.085 26.877 26.877 0 01-3.068-2.698c-.89-.912-1.743-1.952-2.213-2.97C1.242 7.353 1.01 6.47 1 5.979c.004-.003.003-.027.002-.074L1 5.762c0-2.127 1.713-3.914 3.775-3.914 1.08 0 2.065.451 2.888 1.305z"
                                  fill="#4F5168"></path>
                        </svg>
                        2.3w
                    </span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="hot_video_list1">
                    <div class="hot_video1">
                        <a href="#">
                            <div class="hot_pic">
                                <img class="pic" src="../../../../../../../../sumbit/douyu/xshi/xshi/src/main/webapp/dfish/static/1.gif">
                            </div>
                        </a>
                    </div>
                    <div class="hot_video">
                        <div class="hot_video3"><a href="#">
                            <span>我可爱嘛</span>
                        </a>
                        </div>
                        <div class="hot_video4">
                    <span>
                        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.9"
                                  d="M7.663 3.153c.599-.854 1.582-1.305 2.665-1.305 2.06 0 3.775 1.788 3.775 3.914 0 .06 0 .107-.002.14a.316.316 0 00.002.077c-.008.448-.085.817-.222 1.305-.078.088-.15.253-.222.435a1.936 1.936 0 00-.222.435 7.96 7.96 0 01-.136.22c-.564.884-1.346 1.768-2.125 2.547-1.144 1.151-2.304 2.108-2.81 2.526-.142.116-.232.19-.258.216-.185.185-.37.185-.556.185h-.005c-.368-.001-.553-.186-.738-.37a1.68 1.68 0 00-.1-.085 26.877 26.877 0 01-3.068-2.698c-.89-.912-1.743-1.952-2.213-2.97C1.242 7.353 1.01 6.47 1 5.979c.004-.003.003-.027.002-.074L1 5.762c0-2.127 1.713-3.914 3.775-3.914 1.08 0 2.065.451 2.888 1.305z"
                                  fill="#4F5168"></path>
                        </svg>
                        2.3w
                    </span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="hot_video_list1">
                    <div class="hot_video1">
                        <a href="#">
                            <div class="hot_pic">
                                <img class="pic" src="../../../../../../../../sumbit/douyu/xshi/xshi/src/main/webapp/dfish/static/1.gif">
                            </div>
                        </a>
                    </div>
                    <div class="hot_video">
                        <div class="hot_video3"><a href="#">
                            <span>我可爱嘛</span>
                        </a>
                        </div>
                        <div class="hot_video4">
                    <span>
                        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.9"
                                  d="M7.663 3.153c.599-.854 1.582-1.305 2.665-1.305 2.06 0 3.775 1.788 3.775 3.914 0 .06 0 .107-.002.14a.316.316 0 00.002.077c-.008.448-.085.817-.222 1.305-.078.088-.15.253-.222.435a1.936 1.936 0 00-.222.435 7.96 7.96 0 01-.136.22c-.564.884-1.346 1.768-2.125 2.547-1.144 1.151-2.304 2.108-2.81 2.526-.142.116-.232.19-.258.216-.185.185-.37.185-.556.185h-.005c-.368-.001-.553-.186-.738-.37a1.68 1.68 0 00-.1-.085 26.877 26.877 0 01-3.068-2.698c-.89-.912-1.743-1.952-2.213-2.97C1.242 7.353 1.01 6.47 1 5.979c.004-.003.003-.027.002-.074L1 5.762c0-2.127 1.713-3.914 3.775-3.914 1.08 0 2.065.451 2.888 1.305z"
                                  fill="#4F5168"></path>
                        </svg>
                        2.3w
                    </span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="hot_video_list1">
                    <div class="hot_video1">
                        <a href="#">
                            <div class="hot_pic">
                                <img class="pic" src="../../../../../../../../sumbit/douyu/xshi/xshi/src/main/webapp/dfish/static/1.gif">
                            </div>
                        </a>
                    </div>
                    <div class="hot_video">
                        <div class="hot_video3"><a href="#">
                            <span>我可爱嘛</span>
                        </a>
                        </div>
                        <div class="hot_video4">
                    <span>
                        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.9"
                                  d="M7.663 3.153c.599-.854 1.582-1.305 2.665-1.305 2.06 0 3.775 1.788 3.775 3.914 0 .06 0 .107-.002.14a.316.316 0 00.002.077c-.008.448-.085.817-.222 1.305-.078.088-.15.253-.222.435a1.936 1.936 0 00-.222.435 7.96 7.96 0 01-.136.22c-.564.884-1.346 1.768-2.125 2.547-1.144 1.151-2.304 2.108-2.81 2.526-.142.116-.232.19-.258.216-.185.185-.37.185-.556.185h-.005c-.368-.001-.553-.186-.738-.37a1.68 1.68 0 00-.1-.085 26.877 26.877 0 01-3.068-2.698c-.89-.912-1.743-1.952-2.213-2.97C1.242 7.353 1.01 6.47 1 5.979c.004-.003.003-.027.002-.074L1 5.762c0-2.127 1.713-3.914 3.775-3.914 1.08 0 2.065.451 2.888 1.305z"
                                  fill="#4F5168"></path>
                        </svg>
                        2.3w
                    </span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<!--评论-->
<div class="comment_list">
    <ul>
        <li>
            <div class="comment_pl">
                <div class="cpl1">
                    <a href="#">
                        <img src="#">
                    </a>
                </div>
                <div class="cpl2">
                    <div class="cpl3">
                        <span class="pluser">用户名</span>
                    </div>
                    <div class="cpl4">
                        <p>评论的内容</p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

</body>
</html>
